<template>
  <el-main class="layout-main">
    <router-view v-slot="{ Component }">
      <!-- config.layout.mainAnimation为主页面切换动画 -->
      <transition :enter-active-class="aniamted">
        <!-- <transition enter-active-class="animate__animated animate__bounceInRight"> -->
        <component :is="Component" />
      </transition>
    </router-view>
  </el-main>
</template>
<script setup lang="ts">
import { onMounted, ref, toRaw } from "vue";
import { useConfig } from "@/store/config";
import "animate.css"; //引入组件切换动画库

const config = useConfig();

let aniamted = ref<string>("animate__animated animate__bounceInRight");
aniamted.value = toRaw(config.layout.mainAnimation);
</script>
<style lang="scss" scoped>
@media screen and (max-width: 460px) {
  .layout-container .layout-main {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .layout-main-scrollbar {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
}
</style>
